<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Index Example</title>
	<link rel="stylesheet" type="text/css" href="../libs/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../libs/easyui/themes/icon.css">
	<style type="text/css">
		body {
			padding-left: 20px;
			padding-top: 10px;
		}
	</style>
	<script type="text/javascript" src="../libs/jquery.min.js"></script>
	<script type="text/javascript" src="../libs/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../libs/easyui/datagrid-bufferview.js"></script>
</head>
<body>
	<h2>DataGrid Buffer View Demo</h2>
     
    <table id="tt" title="DataGrid - BufferView" style="width:700px;height:300px" data-options="
                view:bufferview,rownumbers:true,singleSelect:false,
                autoRowHeight:false,pageSize:50">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function(){
            $('#tt').datagrid();
			loadLocal();
        });
        function loadLocal(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            $('#tt').datagrid('loadData', rows);
        }
    </script>
    <style type="text/css">
        .datagrid-header-rownumber,.datagrid-cell-rownumber{
            width:35px;
        }
    </style>
</body>
</html>